<template>
  <transition-group @before-enter="beforeEnter" @enter="enter" :css="false" tag="div">
    <div v-for="(item,index) in talkList" :data-index="index" :key="index" v-if="item.show">
      <div class="person-talk">
        <img src="../../static/imgs/a.png" class="person-talk-img">
        <div class="person-talk-text">{{item.Blessings}}</div>
      </div>
    </div>
  </transition-group>
</template>

<script>
import Velocity from 'velocity-animate'
import IO from 'socket.io-client'
export default {
  name: 'Barrage',
  data () {
    return {
      talkList: [],
      clearTime: null
    }
  },
  mounted () {
    this.showPersonTalk()
    document.onkeydown = e => {
      if (this.$route.name === 'barrage' && e.keyCode === 67) {
        // C键跳转到抽奖页面
        clearInterval(this.clearTime)
        this.$router.go(-1)
      }
    }
  },
  methods: {
    beforeEnter (el) {
      let windowHeight = window.outerHeight - 100
      let bottom = Math.floor(Math.random() * windowHeight + 20)
      if (bottom + 200 > windowHeight) {
        bottom = window.outerHeight - 200
      }
      el.style.position = 'fixed'
      el.style.right = '-500px'
      el.style.bottom = bottom + 'px'
      el.style.color = 'yellow'
      el.style.minWidth = '500px'
      el.style.zIndex = 9999
    },
    enter (el, done) {
      Velocity(
        el,
        { right: window.innerWidth + 500 + 'px' },
        {
          duration: 10000,
          mobileHA: false,
          complete: () => {
            done()
            this.talkList[el.dataset.index].show = false
          }
        }
      )
    },
    showPersonTalk () {
      let socket = IO('http://10.3.87.48:1379')
      setTimeout(() => {
        socket.on('Rec_Wx_AnnualMeeting', msg => {
          msg = JSON.parse(msg)
          msg.show = true
          if (this.talkList.length % 20 === 0) {
            setTimeout(() => {
              this.talkList.push(msg)
            }, 800)
          } else {
            this.talkList.push(msg)
          }
        })
      }, 3000)
      /* this.clearTime = setInterval(() => {
        this.talkList.push({
          Blessings: '新年快乐新年快乐新年快乐!',
          show: true
        })
      }, 1000) */
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.person-talk {
  height: 91px;
  .person-talk-img {
    border-radius: 50%;
    border: 1px solid #fff;
    width: 60px;
    height: 60px;
    display: inline-block;
    vertical-align: middle;
  }
  .person-talk-text {
    display: inline-block;
    word-break: break-all;
    word-wrap: break-word;
    max-width: 400px;
    line-height: 28px;
    font-size: 28px;
    margin-left: -12px;
    padding: 10px;
    vertical-align: middle;
    border-right: 1px solid #fff;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
}
</style>
